<template>
  <div class="table-mechanism">
    <vab-query-form>
      <vab-query-form-left-panel>

        <el-form ref="queryForm" :model="queryForm"  label-width="80px" >
            <el-select
              size="mini"

              v-model="checkInMark"
              style="float: left;margin-top: 10px;margin-right: 4px"
              clearable
              filterable
              remote
              :loading="loading"
              placeholder="请输入老人姓名、身份证号或编号"
              :remote-method="remoteMethod"
              @change="val => { this.queryForm.checkInMark=val; search(0,'') }"

              >

              <el-option style="width: 1000px"
                         v-for="item in elderlyCodes"
                         :disabled="item.retreat"
                         :key="item.checkInMark"
                         :label="item.elderlyName"
                         :value="item.checkInMark">
                <el-row :gutter="20">
                  <el-col :span="3"><span style="float: left"><el-tag type="success">姓名</el-tag>{{ item.elderlyName }}</span></el-col>
                  <el-col :span="5"><span style="float: left"><el-tag>证件号</el-tag>{{ item.cardNo }}</span></el-col>
                  <el-col :span="4"><span style="float: left"><el-tag type="warning">入住编号</el-tag>{{ item.checkInMark }}</span></el-col>
                  <el-col :span="6"><span style="float: left"><el-tag>入住时间</el-tag>{{ item.checkedInTime }}</span></el-col>
                  <el-col :span="2"><span style="float: left">
                  <el-tag v-if="item.retreat" type="danger">退住</el-tag>
                  <el-tag v-else>入住</el-tag></span>
                  </el-col>
                </el-row>
              </el-option>
            </el-select>

          <el-date-picker
            style="width: 250px; margin-top: 10px;
                 margin-right: 12px;"
            size="mini"
            align="right"
            value-format="yyyy-MM-dd"
            v-model="value1"
            @change="val => { queryForm.checkedInTimeStart = val && val[0]; queryForm.checkedInTimeEnd = val && val[1]; search(0,'') }"
            type="daterange"
            :unlink-panels="true"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>



        </el-form>


      </vab-query-form-left-panel>
      <vab-query-form-right-panel>

      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="list"
      border
    >

      <el-table-column
        show-overflow-tooltip
        label="账号编号"

        prop="accountNumber"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="elderlyName"
        label="老人姓名"

      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="checkInBedInfo"
        label="楼/单元/楼层/房间/床位"
        width="180px"
      ></el-table-column>



      <el-table-column  label="入住日期"   width="150px">
        <template slot-scope="scope">
          {{scope.row.checkedInTime | parseTime('{y}-{m}-{d}')}}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="advancePayment"
        label="预交金"

      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="deposit"
        label="押金"

      ></el-table-column>

      <el-table-column
        show-overflow-tooltip

        label="总账单金额"

      >
        <template slot-scope="scope">
               {{scope.row.billFee | money}}
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="380px"
        fixed="right"
      >
        <template slot-scope="scope">
          <!--            <el-button type="text"  @click="handlerevise(scope.row.id,scope.row)" >修改入住项目<i class="el-icon-edit"></i></el-button>-->
          <!--            <el-button type="text"  @click="handlerevisejg(scope.row.id,scope.row)">修改入住套餐价格<i class="el-icon-edit"></i></el-button>-->




          <el-button type="text" @click="dialogFormVisible=true;searchfee(scope.row)">费用详情 <i class="el-icon-document-copy"></i></el-button>

        </template>
      </el-table-column>

    </el-table>
    <el-pagination

      :current-page=queryForm.currPageNo
      :total="total"
      :background="true"
      :page-size="queryForm.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>

    <el-dialog
      title="费用详情"
      :visible.sync="dialogFormVisible"
      width="75%"

    >
<!--      <el-row :gutter="24" >-->
<!--        <el-col :span="6">-->
<!--          <span>账户编号：{{accountInfo.accountNumber}}</span>-->
<!--        </el-col>-->
<!--        <el-col :span="6">-->
<!--          <span>入住老人：{{accountInfo.elderlyName}}</span>-->
<!--        </el-col>-->
<!--        <el-col :span="6">-->
<!--            <span>入住状态：<el-tag v-if="accountInfo.retreat" type="info">已退住</el-tag>-->
<!--              <el-tag v-else type="success">入住中</el-tag>-->
<!--            </span>-->
<!--        </el-col>-->
<!--        <el-col :span="6">-->
<!--          <span>入住时间：{{accountInfo.checkedInTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row :gutter="24">-->
      <!--        <el-col :span="6">-->
      <!--          <span>入住床位：{{accountInfo.checkInBedInfo}}<el-tag v-if="accountInfo.compartment" type="success">包房</el-tag></span>-->
<!--        </el-col>-->
<!--        <el-col :span="6">-->
<!--          <span>预交金：<el-tag type="success">¥</el-tag>{{accountInfo.advancePayment | money}}</span>-->
<!--        </el-col>-->
<!--        <el-col :span="6">-->
<!--          <span>押  金：<el-tag type="success">¥</el-tag>{{accountInfo.deposit | money}}</span>-->
<!--        </el-col>-->
<!--      </el-row>-->

      <el-row :gutter="24">
        <el-tabs type="border-card" @tab-click="tabClick" value="snapsettle" v-model="name">
          <el-tab-pane name="outedbill" label="已出账单">
            <el-form :inline="true"  class="demo-form-inline">
              <el-form-item label="账单日期">
                <div class="block">
                  <el-date-picker
                    size="mini"
                    value-format="yyyy-MM"
                    v-model="value2"
                    type="month"
                    placeholder="选择月">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item>

                <el-button type="primary" size="mini" @click="searchOutedBills">查询</el-button>
                <el-button type="warning" size="mini" @click="stamps(0,'')">打印</el-button>

              </el-form-item>
            </el-form>

            <el-table
              :data="outedBills"
              border
              v-loading="loading"
              style="width: 100%">
              <el-table-column
                prop="billCode"
                label="账单号"
                min-width="180">
              </el-table-column>
              <el-table-column
                prop="billDate"
                label="账单日期"
                min-width="180">
              </el-table-column>
              <el-table-column
                prop="billFee"
                label="账单金额(¥)"
                min-width="180">
                <template slot-scope="scope">
                  <span>
                    {{scope.row.billFee | money }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column
                prop="settle"
                label="结算状态">
                <template slot-scope="scope">
                  <span>
                    <el-tag type="warning" v-if="scope.row.settle">已结算</el-tag>
                    <el-tag type="info" v-else>未结算</el-tag>
                  </span>
                </template>
              </el-table-column>

            </el-table>
            <el-pagination
              :current-page="outedbillpage.curr"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="outedbillpage.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="outedbillpage.total">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="执行费用" name="outingbill">
            <el-form :inline="true"  class="demo-form-inline">
              <el-form-item label="费用类型">
                <el-select v-model="outingbillQuery.feeType" size="mini" placeholder="费用类型">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="未入账" value="1"></el-option>
                  <el-option label="已入账" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="结算情况">
                <el-select v-model="outingbillQuery.settled" size="mini" placeholder="费用类型">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="未结算" value="1"></el-option>
                  <el-option label="已结算" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="执行时间" required>
                <el-col :span="11">
                  <el-form-item prop="date1">
                    <el-date-picker type="date"  size="mini" v-model="outingbillQuery.startTime" value-format="yyyy-MM-dd" placeholder="选择日期"  style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                  <el-form-item prop="date2">
                    <el-date-picker type="date" size="mini" v-model="outingbillQuery.endTime" value-format="yyyy-MM-dd" placeholder="选择日期"  style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item>

                <el-button type="primary" size="mini" @click="searchOutingBills">查询</el-button>
                <el-button type="warning" size="mini" @click="stamp(0,'')">打印</el-button>

              </el-form-item>
            </el-form>
            <el-table
              :data="outingBills"
              border
              :loading="loading"

              max-height="400"
              style="width: 100%">
              <el-table-column
                prop="detailNumber"
                fixed
                show-overflow-tooltip
                label="编号"
                min-width="180">
              </el-table-column>
              <el-table-column
                prop="nursingItemName"
                label="费用项目"
                min-width="180">
              </el-table-column>
              <el-table-column
                prop="executionCost"
                label="费用（¥）" min-width="180">
                <template slot-scope="scope">
                  <span>{{ scope.row.executionCost | money }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="recordedTime"
                label="计费时间"
                min-width="180">
              </el-table-column>
              <el-table-column
                prop="settled"
                label="结算情况"
                min-width="180">
                <template slot-scope="scope">
                  <span>
                    <el-tag type="warning" v-if="scope.row.settled">已结算</el-tag>
                    <el-tag type="info" v-else>未结算</el-tag>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="billCode"
                label="入账情况"
                min-width="180">
                <template slot-scope="scope">
                  <span>
                    <el-tag type="success" v-if="scope.row.billCode">已入账</el-tag>
                    <el-tag type="info" v-else>未入账</el-tag>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="revoke"
                label="费用状态"
                min-width="120">
                <template slot-scope="scope">
                  <span>
                    <el-tag type="info" v-if="scope.row.revoke">已撤销</el-tag>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>

    </el-dialog>
    <div ref="print" class="mytables" id="printContent">

      <h3 style="text-align: center;font-size: 25px;">{{checkInOrganName}}费用明细</h3>
      <span style="text-align: right;font-size: 20px;display: block">日期：{{new Date() |parseTime('{y}-{m}-{d}')}}</span>
      <span style="margin-top: 20px;display: block">=================================================================================================================================================================</span>
            <el-row :gutter="24" >
              <el-col :span="6" class="lineheight">
                <span style="font-size: 20px;color: #0e0e0e">账户编号：{{accountInfo.accountNumber}}</span>
              </el-col>
              <el-col :span="6" class="lineheight">
                <span style="font-size: 20px;color: #0e0e0e">入住老人：{{accountInfo.elderlyName}}</span>
              </el-col>
              <el-col :span="6" class="lineheight">
                  <span style="font-size: 20px;color: #0e0e0e">入住状态：入住中
                  </span>
              </el-col>
              <el-col :span="6" class="lineheight">
                <span style="font-size: 20px;color: #0e0e0e">入住时间：{{accountInfo.checkedInTime | parseTime('{y}-{m}-{d}')}}</span>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="6" class="lineheight">
                <span style="font-size: 20px;color: #0e0e0e">入住床位:{{accountInfo.checkInBedInfo}}<el-tag v-if="accountInfo.compartment" type="success">包房</el-tag></span>
              </el-col>
              <el-col :span="6" class="lineheight">
                <span style="font-size: 20px;color: #0e0e0e">预交金：{{accountInfo.advancePayment | money}}¥</span>
              </el-col>
              <el-col :span="6" class="lineheight">
                <span style="font-size: 20px;color: #0e0e0e">押  金：{{accountInfo.deposit | money}}¥</span>
              </el-col>
            </el-row>
      <span>==================================================================================================================================================================</span>
      <table style="width: 100%;margin-top: 20px" class="mytable" cellpadding="0" cellspacing="1">
        <thead>
         <tr>
             
              <td rowspan="2" class="ttitle" style="font-size: 20px;color: #0e0e0e">编号</td>
          <td rowspan="2" class="ttitle" style="font-size: 20px;color: #0e0e0e">费用项目</td>
              <td rowspan="2" class="ttitle" style="font-size: 20px;color: #0e0e0e" >费用</td>
              <td rowspan="2" class="ttitle" style="font-size: 20px;color: #0e0e0e">计费时间</td>
              <td rowspan="2" class="ttitle" style="font-size: 20px;color: #0e0e0e">结算情况</td>
           <td rowspan="2" class="ttitle" style="font-size: 20px;color: #0e0e0e">入账情况</td>
           <td rowspan="2" class="ttitle" style="font-size: 20px;color: #0e0e0e">费用状态</td>
            </tr>
         
        </thead>
        <tbody >
          <tr v-for="item in outingBills" >

              <td style="font-size: 18px;color: #0e0e0e;line-height: 45px;">{{item.detailNumber}}</td>
              <td style="font-size: 18px;color: #0e0e0e;line-height: 45px;"> {{item.nursingItemName}}</td>
              <td style="font-size: 18px;color: #0e0e0e;line-height: 45px;">{{ item.executionCost | money }}</td>
              <td style="font-size: 18px;color: #0e0e0e;line-height: 45px;">{{item.recordedTime}}</td>
              <td style="font-size: 18px;color: #0e0e0e;line-height: 45px;"> <span  v-if="item.settled">已结算</span>
          <span  v-else>未结算</span></td>
              <td style="font-size: 18px;color: #0e0e0e;line-height: 45px;">
          <span  v-if="item.billCode">已入账</span>
          <span  v-else>未入账</span>
        </td>
             <td style="font-size: 18px;color: #0e0e0e;line-height: 45px;" >

          <span  v-if="item.revoke">已撤销</span>

        </td>
               
           
            </tr>

        </tbody>
      </table>


    </div>
    <div ref="prints" class="mytables" id="printContent">

      <h3 style="text-align: center;font-size: 25px;">{{checkInOrganName}}费用明细</h3>
      <span style="text-align: right;font-size: 20px;display: block">日期：{{new Date() |parseTime('{y}-{m}-{d}')}}</span>
      <span style="margin-top: 20px;display: block">=================================================================================================================================================================</span>
      <el-row :gutter="24" >
        <el-col :span="6" class="lineheight">
          <span style="font-size: 20px;color: #0e0e0e">账户编号：{{accountInfo.accountNumber}}</span>
        </el-col>
        <el-col :span="6" class="lineheight">
          <span style="font-size: 20px;color: #0e0e0e">入住老人：{{accountInfo.elderlyName}}</span>
        </el-col>
        <el-col :span="6" class="lineheight">
                  <span style="font-size: 20px;color: #0e0e0e">入住状态：入住中
                  </span>
        </el-col>
        <el-col :span="6" class="lineheight">
          <span style="font-size: 20px;color: #0e0e0e">入住时间：{{accountInfo.checkedInTime | parseTime('{y}-{m}-{d}')}}</span>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6" class="lineheight">
          <span style="font-size: 20px;color: #0e0e0e">入住床位：{{accountInfo.checkInBedInfo}}<el-tag v-if="accountInfo.compartment" type="success">包房</el-tag></span>
        </el-col>
        <el-col :span="6" class="lineheight">
          <span style="font-size: 20px;color: #0e0e0e">预交金：{{accountInfo.advancePayment | money}}¥</span>
        </el-col>
        <el-col :span="6" class="lineheight">
          <span style="font-size: 20px;color: #0e0e0e">押  金：{{accountInfo.deposit | money}}¥</span>
        </el-col>
      </el-row>
      <span>==================================================================================================================================================================</span>
      <table style="width: 100%;margin-top: 20px" class="mytable" cellpadding="0" cellspacing="1">
        <thead>
         <tr>
             
              <td rowspan="2" class="ttitle" style="font-size: 20px;color: #0e0e0e">账单号</td>
          <td rowspan="2" class="ttitle" style="font-size: 20px;color: #0e0e0e">账单日期</td>
              <td rowspan="2" class="ttitle" style="font-size: 20px;color: #0e0e0e" >账单金额</td>
              <td rowspan="2" class="ttitle" style="font-size: 20px;color: #0e0e0e">结算状态</td>
              
            </tr>
         
        </thead>
        <tbody >
          <tr v-for="item in outedBill" >
              <td style="font-size: 18px;color: #0e0e0e;line-height: 45px;">{{item.billCode}}</td>
              <td style="font-size: 18px;color: #0e0e0e;line-height: 45px;"> {{item.billDate}}</td>
              <td style="font-size: 18px;color: #0e0e0e;line-height: 45px;">{{ item.billFee | money }}</td>
              <td style="font-size: 18px;color: #0e0e0e;line-height: 45px;"> <span  v-if="item.settle">已结算</span>
          <span  v-else>未结算</span></td>
           
            </tr>

        </tbody>
      </table>


    </div>

  </div>

</template>

<script>

    import {search} from "@/api/billmanagement";
    import { parseTime} from "@/utils/index";
    import { searchBillOfPage,expensebill} from '@/api/billmanagement'
    import { searchCheckInInfoByElderly } from "@/api/billmanagement"
    import { searchAllfeeDetailsOfNoBill} from '@/api/billmanagement'
    import Print from '@/utils/print'
    import Vue from 'vue'
    import Template from "../../nursing/template";
    Vue.use(Print)

    export default {
        name: "Billmanagement",
        components: {Template},
        filters:{
            parseTime:parseTime,
            money(val) {
                val = (val + "").replace(/\$|\,/g, "");
                if (isNaN(val)) {
                    val = "0";
                }
                let sign = (val == (val = Math.abs(val)));
                val = Math.floor(val * 100 + 0.50000000001);
                let cents = val % 100;
                val = Math.floor(val / 100).toString();
                if (cents < 10) {
                    cents = "0" + cents;
                }
                for (let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
                    val = val.substring(0, val.length - (4 * i + 3)) + "," + val.substring(val.length - (4 * i + 3));
                }

                return (((sign) ? "" : "-") + val + "." + cents);
            }

        },
        created(){
          this.queryForm.institutionNumber=localStorage.getItem('institutionNumber')
            this.search()

        },
        data(){
            return{
                list:[],
                checkInList:[],
                total:0,
                listLoading:false,
                value1:"",
                value2:'',//月份时间
                name:'outedbill',
                elderlyCodes:[],
                loading:false,
                checkInMark: undefined,
                dialogFormVisible:false,
                checkInOrganName:"",
                queryForm: {
                    currPageNo: 1,
                    limit: 10,
                    institutionNumber:"",
                    checkInMark:"",
                    createDateStart:"",
                    createDateEnd:"",
                },
                outingbillQuery: {
                    feeType: '1',
                    settled: '0',
                    startTime: '',
                    endTime: ''
                },
                outedbillpage: {
                    curr: 1,
                    limit: 10,
                    total: 0
                },
                //已出账单
                outedBills: [],
                //打印已出账单
                outedBill:[],
                //未出账单费用明细
                outingBills:[],
                accountInfo:{

                },
            }
        },
        methods:{
               search(id){
                   if(id==0){
                       this.queryForm.currPageNo=1
                   }
                   this.listLoading=true
                   search(this.queryForm).then(res =>{
                       this.list=res.data.data
                       this.total=res.data.total
                       setTimeout(() => {
                           this.listLoading = false;
                       }, 500);
                   })
               },
            remoteMethod(query) {

                if (query !== '') {
                    let elderlyCondition=query
                    searchCheckInInfoByElderly(elderlyCondition).then(res => {
                        console.log(res)
                        this.elderlyCodes=res.data

                    })
                } else {
                }
            },
            //查询已出账单
            searchOutedBills() {
                let params = {
                    currPageNo: this.outedbillpage.curr,
                    limit: this.outedbillpage.limit,
                    settled: null,
                    billDate:this.value2

            }
                searchBillOfPage(this.accountInfo.checkInMark, params).then(result => {
                    // if (result.code == '200') {
                    //     if (result.data.data) {
                    //         this.outedBills = result.data.data
                    //         this.outedbillpage.total = result.data.total
                    //     } else {
                    //         this.outedBills = []
                    //         this.outedbillpage.total = 0
                    //     }
                    // } else {
                    //     this.$message.error('查询已出账单异常，' + result.msg)
                    // }

                    this.outedBills = result.data.data
                    this.outedbillpage.total = result.data.total
                    let expenprint={
                        settled: null,
                        billDate:this.value2,
                        checkInMark:this.accountInfo.checkInMark
                    }
                    expensebill(expenprint).then(result => {
                        console.log(result)
                        this.outedBill = result.data

                    })

                })

            },
            searchOutingBills() {
                this.loading=true

                searchAllfeeDetailsOfNoBill(this.accountInfo.checkInMark, this.outingbillQuery).then(result => {
                    // if (result.code == '200') {
                    //     if (result.data) {
                    //     } else {
                    //         this.outingBills = []
                    //     }
                    // } else {
                    //     this.$message.error('查询未出账单异常，' + result.msg)
                    // }
                    this.outingBills = result.data
                    setTimeout(() => {
                        this.loading = false;
                    }, 500);
                })
            },
            stamps(size){

                if(this.outedBills){
                    this.$print(this.$refs.prints, { size })
                }else {
                    this.$baseMessage("当前时间无数据可打印",'warning');
                }
            },
            stamp(size){
                if(this.outingBills){
                    this.$print(this.$refs.print, { size })
                }else {
                    this.$baseMessage("当前时间无数据可打印",'warning');
                }
            },
            tabClick(tab){
                if (tab.name == 'outedbill') {//已出账单
                        this.searchOutedBills()

                } else if (tab.name == 'outingbill') {//未出账单

                    if (this.accountInfo.checkInMark) {
                        this.searchOutingBills()
                    }
                }
            },
            searchfee(row){
                this.name='outedbill'
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth();
                var toMonth = year + "-"+ (month + 1) ;
                this.value2 = toMonth;


                this.checkInOrganName=row.institutionName
                 this.accountInfo={...row}

                this.outingbillQuery= {
                        feeType: '1',
                        settled: '0',
                        startTime: '',
                        endTime: ''
                },
                this.searchOutedBills()
            },
            handleSizeChange(val) {
                this.queryForm.limit = val;
                this.search();
            },
            handleCurrentChange(val) {

                this.queryForm.currPageNo = val;
                this.search();


            },
        }
    }
</script>

<style scoped>
  .mytables{
    display: none ;


  }
.lineheight{
  line-height: 50px;

}
</style>
